<template>
  <div class="hello">
    <h1>{{ person.name }}</h1>
    <h1>{{ person.age }}</h1>
    <h1>{{ person.sex }}</h1>
    <button @click.once="getData">获取数据</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "HelloWorld",
  data() {
    return {
      person: {},
    };
  },
  methods: {
    getData() {
      axios({ method: "get", url: "/api/index" })
        .then((response) => {
          console.log(response.data);
          this.person = JSON.parse(response.data);
        })
        .catch((error) => {
          console.log(error);
        })
        .then(() => {});
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
